<template>
    <div>
        <el-card :body-style="{ padding: '0px' }">
            <div class="publiclist_top">
                <span>加入时间</span>
                <el-date-picker
                    v-model="quertInfo.start"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择开始时间">
                </el-date-picker>
                <span class="textPadding">至</span>
                <el-date-picker
                    v-model="quertInfo.end"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择结束时间">
                </el-date-picker>
                <span></span>
                <el-input v-model="quertInfo.publicname" placeholder="公众号名称"></el-input>
                <span></span>
                <el-button type="primary" class="chaxunBtn" @click="chaxunBtn">查询</el-button>
                <p>加入时间：{{andDate.start}} 至 {{andDate.end}}</p>
            </div>
            <div class="addPublic" v-if="isAdimn == 'false'">
                <el-button type="primary" round icon="el-icon-circle-plus-outline" @click="addPublic" :loading="loading">添加公众号</el-button>    
            </div>    
            <el-table
                :data="tableData"
                border
                :summary-method="getSummaries"
                show-summary
                class="userTable"
                style="width: 98%">
                <el-table-column
                    type="selection"
                    width="60">
                </el-table-column>
                <el-table-column
                    type="index"
                    label="序号"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="touxiang"
                    width="80"
                    label="头像">
                    <template slot-scope="scope">
                        <img class="publicTouxiang" referrerPolicy="no-referrer" :src="scope.row.touxiang" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="publicName"
                    width="150"
                    label="公众号">
                </el-table-column>
                <el-table-column
                    prop="yuanId"
                    label="原始ID">
                </el-table-column>
                <el-table-column
                    prop="bodys"
                    width="250"
                    label="主体">
                </el-table-column>
                <el-table-column
                    prop="appId"
                    sortable
                    label="APPID">
                </el-table-column>
                <el-table-column
                    prop="empowerDate"
                    label="授权时间">
                </el-table-column>
                <el-table-column min-width="410" label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="success" plain
                        @click="toPublicdetails(scope.$index)"
                        >详情</el-button>
                        <el-button
                        size="mini"
                        type="primary" plain
                        @click="toAutoreply(scope.$index)"
                        >自动回复</el-button>
                        <el-button
                        size="mini"
                        type="primary" plain
                        @click="toPublicadd(scope.$index)"
                        >广告位置</el-button>
                        <el-button
                        size="mini"
                        type="danger" plain
                        @click="openSCdialog(scope.$index)"
                        >删除</el-button>
                        <el-button
                        v-if="isAdimn == 'true'"
                        size="mini"
                        icon="el-icon-setting"
                        type="warning" plain
                        @click="toPablicsetting(scope.row)"
                        >设置</el-button>
                        <el-switch
                            style="margin-left:15px"
                            v-model="scope.row.switchOpen"
                            active-color="#13ce66"
                            inactive-color="#909399"
                            active-text="开启查题"
                            @change="openCloseTopic(scope.row.appId)"
                            inactive-text="关闭查题">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    style="float:right"
                    background
                    :current-page="quertInfo.pagenum"
                    :page-size="quertInfo.pagesize"
                    layout="prev, pager, next, total"
                    :total="total">
                </el-pagination> 
            </div>
             
        </el-card>
        <!-- 删除公众号对话框 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            title="是否删除"
            top="35vh"
        >   
            <div style="display:flex">
                <span>公众号</span>
                <p style="margin-left:90px;color:#000">{{scpublicName}}</p>
            </div> <br><br><br>
            <el-button type="success" class="fengjinBtn" @click="toDelete">删除</el-button>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            andDate:{
                start:'',
                end:''
            },
            quertInfo:{
                pagenum:1,
                pagesize:10,
				start:'',
				end:'',
				publicname:''
            },
            total:0,
            tableData: [],
            dialogVisible:false,
            scpublicName :'',
            scAppid:'',
            loading:false,
            isAdimn:''
        }
    },
    methods:{
        toPablicsetting(row){
            this.$router.push({name:"Pablicsetting",query:{appId:row.appId}})
        },
        addPublic(){
            this.loading = true;
            this.$http.get('addPublic').then((data)=>{
                if(data.data.success){
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:500,
						onClose:()=>{
							this.loading = false;
							// window.open(data.data.data.addPublicUrl)
                            this.$alert('<a style="font-size: 18px;" target="_blank" href="' + data.data.data.addPublicUrl + '">点击授权</a>', 'HTML 片段', {
                                dangerouslyUseHTMLString: true,
                                title:'',
                                showConfirmButton:false
                            });
						}
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        getSummaries(param){
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index)=>{
                if(index === 0){
                    sums[index] = '合计';
                }else if(index === 1){
                    sums[index] = this.tableData.length;
                }else{
                    sums[index] = '*';
                }
            })
            return sums;
        },
        toPublicdetails(x){
            var appId = this.tableData[x].appId;
            this.$router.push({name:"Publicdetails",query:{appId}})
        },
        openSCdialog(x){
            this.dialogVisible = true
            this.scpublicName = this.tableData[x].publicName;
            this.scAppid = this.tableData[x].appId;
        },
        toDelete(){
            this.dialogVisible = false;
            console.log(this.scAppid)
            this.$http.post('delPublic',{appId:this.scAppid}).then((data)=>{
                if(data.data.success){
                    this.getPublicList()
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        openCloseTopic(v){
            this.$http.post('openCloseTopic',{appId:v}).then((data)=>{
                if(data.data.success){
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        toAutoreply(x){
            var appId = this.tableData[x].appId;
            this.$router.push({name:"Autoreply",query:{appId}})
        },
        toPublicadd(x){
            var appId = this.tableData[x].appId;
            this.$router.push({name:"Publicadd",query:{appId}})
        },
        handleCurrentChange(newPage){
            this.quertInfo.pagenum = newPage;
            this.getPublicList()
        },
        getPublicList(){
            this.$http.post('getPublicList',this.quertInfo).then((data)=>{
                if(data.data.success){
                    this.tableData = data.data.data.tableData;
                    this.andDate = data.data.data.andDate
                    this.total = data.data.data.total
					var num = data.data.msg.length;
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
					});
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        chaxunBtn(){
            this.getPublicList()
        }
    },
    created() {
        this.isAdimn = window.atob(this.$cookie.get('isAdimn'));
        this.getPublicList()
    }
}
</script>

<style scoped>
.el-card{
    margin: 8px;
} 
.publiclist_top{
    display: flex;
    align-items: center;
    padding: 10px 60px;
    font-size: 14px;
} 
.publiclist_top>span{
    margin:  0 8px;
}
.publiclist_top>p{
    width: 390px;
}
.el-input{
    width: 180px;
}
.el-date-editor.el-input{
    width: 180px;
}
.chaxunBtn{
    width: 117px;
    margin-right: 80px;
}
.addPublic{
    margin: 20px;
}
.publicTouxiang{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.userTable{
    margin: 10px;
}
.pagination{
    padding: 10px 30px 30px;
    overflow: hidden;
}
.fengjinBtn{
    background-color: #2AD198;
    color: #fff;
    width: 117px;
    margin-left: 100px;
}
</style>